<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">

<body>
	<div id="header" class="container">
	
		<style type="text/css">
     		body {
        		padding-top: 20px;
        		padding-bottom: 40px;
      		}
    	</style>
	
		<div class="container">	
			<div class="page-header">
    		<img wicket:id="logo" alt="The Babushka" /> 
    		<h1><small>Handpicking quality items</small></h1>
    		</div>
    		<span wicket:id="welcomeMsg" />
		</div>
		
		<ul class="nav nav-pills">
		   <li class="unknown"><a wicket:id="homeLink" >Home</a></li>
		   <li><a href="#signUp" data-toggle="modal" >Sign up</a></li>
		   <li><a href="#signIn" data-toggle="modal" >Sign in</a></li>
		   <li><a wicket:id="signOutLink" >Sign out</a></li>
		   <li><a href="#">Read our blog</a></li>
		   <li><a wicket:id="myBasketLink" >My Basket</a></li>
		   <li><a wicket:id="sellerAdminLink" >Profile Administration</a></li>
		</ul>
		
		<link rel="shortcut icon" href="ico/favicon.ico">
    	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
    	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
    	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
    	<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
		
	</div>	     	
		
	<div id="content" class="container">
	
		<!--Sing in modal-->
		<div class="modal hide fade" id="signIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    		<div class="modal-header">
      			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      			<h3 id="myModalLabel">Sign in with your credentials</h3>
    		</div>
		  	<form class="form-horizontal" wicket:id="loginForm" >
		    	<div class="control-group">
		      		<label class="control-label" for="inputEmail">Email</label>
			     	<div class="controls">
			      		<input type="text" id="inputEmail" wicket:id="username" />
			     	</div>
		    	</div>
		    	<div class="control-group">
		      		<label class="control-label" for="inputPassword">Password</label>
		     		<div class="controls">
		      			<input type="password" id="inputPassword" wicket:id="password"/>
		     		</div>
		    	</div>
		    	<div class="modal-footer">
      				<button class="btn btn-primary" wicket:id="loginBtn">Sign in</button>
    			</div>
		    </form>
   		</div>

		<!--Sing up modal-->
		<div class="modal hide fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    		<div class="modal-header">
      			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      			<h3 id="myModalLabel">Create your account</h3>
    		</div>
		  	<form class="form-horizontal" wicket:id="registerForm" >
		    	<div class="control-group">
		      		<label class="control-label" for="inputEmail">Email</label>
			     	<div class="controls">
			      		<input type="text" id="inputEmail" wicket:id="username" />
			     	</div>
		    	</div>
		    	<div class="control-group">
		      		<label class="control-label" for="inputPassword">Password</label>
		     		<div class="controls">
		      			<input type="password" id="inputPassword" wicket:id="password"/>
		     		</div>
		    	</div>
		    	<div class="control-group">
		      		<label class="control-label" for="firstName">First Name</label>
			     	<div class="controls">
			      		<input type="text" id="firstName" wicket:id="firstName" />
			     	</div>
		    	</div>
		    	<div class="control-group">
		      		<label class="control-label" for="lastName">Last Name</label>
			     	<div class="controls">
			      		<input type="text" id="lastName" wicket:id="lastName" />
			     	</div>
		    	</div>
		    	<div class="modal-footer">
      				<button class="btn btn-primary" wicket:id="registerBtn">Sign up</button>
    			</div>
		    </form>
   		</div>

		<div wicket:id="feedbackPanel"></div>
		<wicket:child/>
	</div>
	
	<div id="footer" class="container">
		<div id="about">
			<wicket:message key="trustLabel"></wicket:message>	| 
			<wicket:message key="conditionsLabel"></wicket:message>
		</div>
		<div id="veil" style="background:url('images/ajax-loader.gif') center no-repeat;display:none;position:fixed;top:0;left:0;z-index=99999;background-color:black;width:100%;height:100%;color:white;opacity:0.5;filter:alpha(opacity=50);" />
	</div> 
	
	<script>
		$('ul.nav.nav-pills li a').click(function() {           
	    	$(this).parent().addClass('active').siblings().removeClass('active');           
		});
	</script>
		
</body>
</html>